<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
    <el-menu-item
      v-for="(item, index) in $store.state.menus"
      :key="item.href"
      :index="index + ''"
      @click="handleClick(index, item.href)"
    >
      {{ item.name }}
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  name: "NavMenu",
  data() {
    return {
      activeIndex: "0"
    };
  },
  methods: {
    handleClick(index, href) {
      if (this.activeIndex == index) {
        return;
      }
      this.activeIndex = index + "";
      this.$router.push({ path: href });
    }
  }
};
</script>

<style scoped></style>
